<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html>
<head>
    <meta charset="utf-8" />
    <title>tab面板切换</title>
    <style>
        .content{width: 1000px;height: 500px;margin: 0 auto;border: 1px solid #ccc}
        #sel_ul{width: 100%;text-align: center;overflow: hidden;border: 1px solid #ccc;}
        #sel_ul li{display: inline-block;width: 75px;height: 75px;border-right: 1px solid #ccc;cursor: pointer;}
        img{width: 100%;height: auto;}
        .banner{width: 1000px;height: 400px;display: none;}
        .on{display: block;}
    </style>
</head>
<body>
<div class="content">
    <div id="sel_ul">
        <li><img src="img/shap_1.png" ></li>
        <li><img src="img/shap_3.png" ></li>
        <li><img src="img/shap_4.png" ></li>
    </div>
    <div class="banner on">aaaa</div>
    <div class="banner">bbbb</div>
    <div class="banner">cccc</div>

</div>
<script>

    var ChangeNode=function(b_img_src,g_img_src,target,banner_t)
    {
        this.blue_img_src=b_img_src;//点亮的图片
        this.gray_img_scr=g_img_src;//未点亮的灰色图片
        this.img_li=target;//包含img标签的li容器
        this.banner_tartet=banner_t;//banner面板

    }
    /*
     @news:新的ChangeNode对象
     @old：与news相对
     * */
    function changeImg(news,old)
    {
        if(old!=null)
        {
            old.img_li.querySelector("img").src=old.gray_img_scr;
            old.banner_tartet.className="banner";
        }
        news.img_li.querySelector("img").src=news.blue_img_src;
        news.banner_tartet.className="banner on";
    }
    (function(){

        if(document.getElementById){
            if(!document.getElementById("sel_ul")){
                return false;
            }
        }
        var sel_ul=document.getElementById("sel_ul"),
            sel_li=sel_ul.querySelectorAll("li"),
            li_len=sel_li.length || sel_ul.childNodes.length,//获取子元素的长度
            banner_list=document.querySelectorAll(".banner");

        var changeImgFooPool=new Array();
        changeImgFooPool[0]=new ChangeNode("img/shap_1_sel.png","img/shap_1.png",sel_li[0],banner_list[0]);
        changeImgFooPool[1]=new ChangeNode("img/shap_3_sel.png","img/shap_3.png",sel_li[1],banner_list[1]);
        changeImgFooPool[2]=new ChangeNode("img/shap_4_sel.png","img/shap_4.png",sel_li[2],banner_list[2]);

        var index=-1;
        for(var i=0;i<li_len;i++){
            index=index+1;
            sel_li[i].setAttribute("index",index);
        }
        var currentTarget=null;
        currentTarget=changeImgFooPool[0];
        changeImg(currentTarget,null);

        sel_ul.onclick=function(e){

            var evt=e||window.event;
            var target=evt.target||evt.srcElement;

            var temp=null;
            if(target.nodeName.toLowerCase()=="img"){
                for(var i=0;i<li_len;i++) {
                    if(target.parentNode==changeImgFooPool[i].img_li){
                        temp=changeImgFooPool[i];
                        break;
                    }
                }
                changeImg(temp,currentTarget);
                currentTarget=temp;
            }
        }
    })();
</script>
</body>
</html>